/* eslint-disable @typescript-eslint/no-explicit-any */
import { List, SelectType, ButtonPrimary, ButtonDanger, Check, Radio, TableList } from '../imports';
import { bar } from '../style.css';

function addData(parent: any, pid: string) {
	const rows: unknown[] = [];
	for (let i = 1; i <= 10; i++) {
		const row = { id: pid + '-' + i, text: pid + '-' + i + '：一些数据' + Math.floor(Math.random() * 5), children: [] };
		rows.push(row);
	}
	parent.children = rows;
}

export const LIST_DATA = [
	{
		text: '数据1',
		children: [
			{
				text: '数据1-1',
				disable: true,
			},
			{
				text: '数据1-2',
				children: [
					{
						text: '数据1-2-1',
					},
					{
						text: '数据1-2-2',
					},
				],
			},
		],
	},
	{
		text: '数据2',
	},
	{
		text: '数据3',
		expand: true,
		children: [
			{
				text: '数据3-1',
			},
			{
				text: '数据3-2',
			},
		],
	},
];

export function ListPage() {
	let ls0: List;
	let ls1: List;
	let ls2: TableList;
	function setSelectType(type: SelectType) {
		[ls0, ls1, ls2].forEach((l) => l.setSelectType(type));
	}
	return (
		<>
			<h2>数据列表（包括树列表）</h2>
			<div class={bar}>
				<ButtonPrimary
					onClick={() => {
						const result: unknown[] = [];
						for (let i = 1; i <= 100; i++) {
							const row = { id: i + '', text: i + '：一些数据' + Math.floor(Math.random() * 5), children: [] };
							result.push(row);
							// result.push([]);
						}
						console.log('data generated!');
						[ls0, ls1].forEach((l) => l.setRows(result));
					}}
				>
					添加数据（动态加载子节点）
				</ButtonPrimary>
				<ButtonPrimary onClick={() => [ls0, ls1, ls2].forEach((l) => l.setRows(JSON.parse(JSON.stringify(LIST_DATA))))}>
					添加数据(完整)
				</ButtonPrimary>
				<ButtonDanger onClick={() => [ls0, ls1, ls2].forEach((l) => l.setRows([]))}>删除数据</ButtonDanger>
				<span style={{ margin: '0 1rem' }}> | </span>
				<label>
					<Check
						ref={(ck) => {
							ck.addEventListener('click', () => {
								if (ck.checked) {
									[ls0, ls1, ls2].forEach((l) => l.setSelectable(true));
								} else {
									[ls0, ls1, ls2].forEach((l) => l.setSelectable(false));
								}
							});
						}}
					/>
					复选框
				</label>
				<span style={{ margin: '0 1rem' }}> | </span>
				<label>
					<Check
						ref={(ck) => {
							ck.addEventListener('click', () => {
								if (ck.checked) {
									[ls0, ls1, ls2].forEach((l) => l.setActivable(true));
								} else {
									[ls0, ls1, ls2].forEach((l) => l.setActivable(false));
								}
							});
						}}
					/>
					行选择
				</label>
				<span style={{ margin: '0 1rem' }}> | </span>
				选择方式：
				<label>
					<Radio name="select-type" checked onClick={() => setSelectType('any')} /> 任意节点
				</label>
				<label>
					<Radio name="select-type" onClick={() => setSelectType('leaf')} /> 仅叶子节点
				</label>
				<label>
					<Radio name="select-type" onClick={() => setSelectType('cascade')} /> 级联选择
				</label>
			</div>
			<List
				disableOn="disable"
				class="highligh-hover"
				column={{ text: 'text', children: 'children', expand: 'expand' }}
				ref={(l) => (ls0 = l)}
				onRowCheck={(detail) => {
					console.log('row check:', ls0.selected, detail);
				}}
				onRowClick={(detail) => {
					console.log('row click:', ls0.activeValue, detail);
				}}
				onRowExpand={(detail) => {
					if (detail.expand) {
						if ((detail.row as any).children.length === 0) {
							addData(detail.row, (detail.row as any).id as string);
						}
						ls0.refresh('data');
					}
				}}
			/>
			<h2>自定义行高</h2>
			<List
				config={{ cellPadding: '0.3em' }}
				disableOn="disable"
				class="highligh-hover"
				column={{ text: 'text', children: 'children', expand: 'expand' }}
				ref={(l) => (ls1 = l)}
				onRowExpand={(detail) => {
					if (detail.expand) {
						if ((detail.row as any).children.length === 0) {
							addData(detail.row, (detail.row as any).id as string);
						}
						ls1.refresh('data');
					}
				}}
			/>
			<h2>TableList</h2>
			<TableList
				disableOn="disable"
				class="highligh-hover"
				column={{ text: 'text', children: 'children', expand: 'expand' }}
				ref={(l) => (ls2 = l)}
				onRowExpand={(detail) => {
					if (detail.expand) {
						if ((detail.row as any).children.length === 0) {
							addData(detail.row, (detail.row as any).id as string);
						}
						ls1.refresh('data');
					}
				}}
			/>
		</>
	);
}
